<template>
    <div class="ConsumvlesWriteoff">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>易耗品管理</el-breadcrumb-item>
            <el-breadcrumb-item>易耗品核销</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row> </el-row>
        <h2>核销记录</h2>
        <el-row :gutter="24">
            <el-col :span="3">
                <div class="grid-content bg-purple">
                    <el-button type="text" @click="dialogFormVisible = true" icon="el-icon-plus"
                        style="padding: 12px; background-color: #3f3f65; color: white">查看所有核销</el-button>
                </div>
            </el-col>

            <el-col :span="3">
                <el-input v-model="input" placeholder="请输入内容" style="width: 120px;"></el-input>
            </el-col>
            <el-col :span="5">
                <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="起始日期"
                    end-placeholder="结束日期" style="width: 200px;">
                </el-date-picker>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" class="chaXun" style="padding: 12px; background-color: #3f3f65" @click="getdata()"
                    v-model="input">查询</el-button>
            </el-col>

            <el-col :span="4" center>
                <el-dropdown style="padding-left: 10px">
                    <el-button type=" primary"
                        style="
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            background-color: white;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            color: #3f3f65;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            border-color: #3f3f65;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        "
                        @click="exportExcel">
                        导出Excel<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item></el-dropdown-item>
                        <el-dropdown-item>导出全部</el-dropdown-item><br />
                        <el-dropdown-item>导出选中</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
        <div class="from color">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
                cell-class-name="table-center">
                <el-table-column type="selection" width="55" header-align="center"></el-table-column>

                <el-table-column label="分类" width="100" prop="className" header-align="center">

                </el-table-column>

                <el-table-column label="名称" width="60" prop="cname" header-align="center"> </el-table-column>

                <el-table-column label="编码" width="60" prop="id" header-align="center"></el-table-column>

                <el-table-column label="单价（元）" width="120" prop="cprice" header-align="center"> </el-table-column>

                <el-table-column label="核销数量" width="60" prop="cnum" header-align="center"> </el-table-column>

                <el-table-column label="规格" width="60" prop="cspecification" header-align="center"> </el-table-column>

                <el-table-column label="入库时间" width="140" prop="cdepositTime" header-align="center"> </el-table-column>

                <el-table-column label="核销时间" width="140" prop="cwriteOffTime" header-align="center"> </el-table-column>

                <el-table-column label="审核状态" width="80" prop="cauditState" header-align="center">
                    <template slot-scope="scope">
                        {{ scope.row.cauditState == 0 ? "已通过" : "已拒绝" }}
                    </template>

                </el-table-column>
                <el-table-column label="操作" header-align="center" prop="address">
                    <template slot-scope="scope">
                        <el-button type="warning" circle class="el-icon-search"
                            @click="showDialog(scope.row.id)"></el-button>
                        <el-button type="primary" @click="editDialog(scope.row.id)" icon="el-icon-edit" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle
                            @click="handleDelete(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-pagination type="primary" background layout="prev, pager, next" :total="total" class="pag"
            @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize">
        </el-pagination>

        <!-- 新增报废模态框 -->
        <el-dialog title="报废详情" :visible.sync="dialogFormVisible" width="70%">
            <div class="addLoseBox">
                <el-form :model="addForm" ref="editformRef">
                    <el-form-item label="查询区域：" :label-width="formLabelWidth">
                        <el-input v-model="input" placeholder="请输入编码或名称" style="width: 150px"></el-input>
                        <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="入库起始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button type="primary" class="chaXun" style="background-color: #3f3f65" @click="getdata()"
                            v-model="input">查询</el-button>
                    </el-form-item>
                    <el-form>
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange" cell-class-name="table-center" highlight-current-row>
                            <el-table-column type="index" width="55" header-align="center"
                                @click="getid()"></el-table-column>
                            <el-table-column label="分类" width="80" prop="className">
                            </el-table-column>
                            <el-table-column prop="cname" label="名称" width="80" header-align="center">
                            </el-table-column>
                            <el-table-column prop="id" label="编码" width="80" header-align="center">
                            </el-table-column>
                            <el-table-column prop="cprice" label="单价（元）" width="100" header-align="center">
                            </el-table-column>
                            <el-table-column prop="cnum" label="数量" width="80" header-align="center">
                            </el-table-column>

                            <el-table-column prop="cspecification" label="规格" width="80" header-align="center">
                            </el-table-column>

                            <el-table-column prop="storageSite" label="存放地点" show-overflow-tooltip header-align="center">

                            </el-table-column>

                            <el-table-column prop="cdepositTime" label="入库时间" width="150" header-align="center">
                            </el-table-column>

                            <el-table-column label="核销数量" width="200" prop="cnum" header-align="center">
                                <el-input v-model="input2" placeholder="请输入核销数量" @input="change($event)"></el-input>
                            </el-table-column>
                        </el-table>
                    </el-form>
                    <div>

                        <el-form-item label="核销原因：" :label-width="formLabelWidth" prop="creasonOffWrite">
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
                            </el-input>
                        </el-form-item>
                    </div>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editwarehousing()">确 定</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 查看详情模态框 -->
        <el-dialog title="核销详情" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <el-form :model="showform" ref="showformRef">
                <el-form-item label="编号" :label-width="formLabelWidth">
                    <el-input v-model="showform.id" autocomplete="off" disabled style="width: 320px;"></el-input>
                </el-form-item>
                <el-form-item label="选择分类" :label-width="formLabelWidth" prop="classId">
                    <el-select v-model="showform.classId" placeholder="实验室器材-玻璃器材" prop="cauditState">
                        <el-option label="实验室器材-玻璃器材" value="1"></el-option>
                        <el-option label="实验室器材-金属器材" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="showform.cname" autocomplete="off" disabled style="width: 320px;"></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth">
                    <el-input v-model="showform.cprice" autocomplete="off" disabled style="width: 320px;">元</el-input>
                </el-form-item>
                <el-form-item label="核销数量" :label-width="formLabelWidth">
                    <el-input v-model="showform.cnum" autocomplete="off" disabled style="width: 320px;"></el-input>
                </el-form-item>
                <el-form-item label="规格" :label-width="formLabelWidth">
                    <el-input v-model="showform.cspecification" autocomplete="off" disabled
                        style="width: 320px;"></el-input>
                </el-form-item>
                <el-form-item label="存放地点" :label-width="formLabelWidth">
                    <el-select v-model="showform.storageSite" placeholder="实验室1">
                        <el-option label="实验室1" value="1"></el-option>
                        <el-option label="实验室2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="核销原因" :label-width="formLabelWidth">
                    <el-input v-model="showform.creasonOffWrite" autocomplete="off" disabled
                        style="width: 320px;"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改选项模态框 -->
        <el-dialog title="核销详情" :visible.sync="centerDialogVisible" width="40%" :before-close="handleClose">
            <el-form :model="editform" ref="editformRef">
                <el-form-item label="选择分类" :label-width="formLabelWidth" prop="classId">
                    <el-select v-model="editform.className" placeholder="实验室器材-玻璃器材" prop="cauditState">
                        <el-option label="实验室器材-玻璃器材" value="0"></el-option>
                        <el-option label="实验室器材-金属器材" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="editform.cname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth">
                    <el-input v-model="editform.cprice" autocomplete="off">元</el-input>
                </el-form-item>
                <el-form-item label="核销数量" :label-width="formLabelWidth">
                    <el-input v-model="editform.cnum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="规格" :label-width="formLabelWidth">
                    <el-input v-model="editform.cspecification" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="存放地点" :label-width="formLabelWidth">
                    <el-select v-model="editform.storageSite" placeholder="实验室1">
                        <el-option label="实验室1" value="1"></el-option>
                        <el-option label="实验室2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核状态" :label-width="formLabelWidth" prop="cauditState">
                    <el-select v-model="editform.cauditState">
                        <el-option label="已拒绝" value="1"></el-option>
                        <el-option label="已通过" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editwarehousing">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
    
<script>
import { mapGetters, mapActions } from "vuex";
import axios from "../../utils/axios";
import toExcel from "./../../utils/toExcel";
export default {
    data() {
        return {
            input2: '',
            multipleSelection: [],
            dialogFormVisible: false,
            dialogVisible: false,//查看模态框
            centerDialogVisible: false,
            formLabelWidth: "120px",
            value1: '',
            value2: '',
            input: '',
            textarea: '',
            currentPage: 1,
            pageSize: 10,
            total: 50,
            tableData: [
            ],
            //查询到的易耗品信息
            showform: {
                id: '',
                classId: '',
                cname: '',
                cprice: '',
                cnum: '',
                cspecification: '',
                storageSite: '',
                creasonOffWrite: '',


            },
            form: {
                classId: '',
                cclassification: '',
                cname: '',
                cnum: '',
                cprice: '',
                creceiveNum: '',
                cspecification: '',
                cstorageSite: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                id: '',
                cdepositTime: '',
                className: '',
                creasonOffWrite: '',
                cauditState: '',
            },
            //添加用户表单数据
            addForm: {
                classId: '',
                cname: '',
                id: '',
                cprice: '',
                cnum: '',
                cspecification: '',
                storageSite: '',
                capplyForTime: '',
                cstorageSiteId: '',
                className: '',
            }
            ,
            //修改用户表单数据
            editform: {
                className: '',
                cname: '',
                id: '',
                cprice: '',
                cnum: '',
                cspecification: '',
                storageSite: '',
                cstorageSiteId: '',
                creasonOffWrite: '',
                cauditState: '',

            },

        };
    },
    methods: {
        ...mapActions(["setTest"]),
        //日历
        disabledDate(time) {
            return time.getTime() > Date.now();
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => { });
        },
        //显示当前页码
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            console.log('当前页码：', currentPage);
            axios({
                url: '/consumable/writeOff/page',
                method: 'post',
                data: { "page": currentPage, "limit": this.pageSize }
            }).then((r) => {
                console.log(r.data.data);
                this.tableData = r.data.data
            });
        },
        handlesizeChange(currentPage) {
            console.log(currentPage);
            this.pagesize = currentPage;
            this.getdata()
        },
        //数据渲染
        getdata() {
            console.log(this.value1);
            let date1 = ""
            let date2 = ""
            if (this.value1 != "") {
                console.log("in");
                date1 = String(this.msToDate(this.value1[0]));
                date2 = String(this.msToDate(this.value1[1]));
            }
            console.log("data1", date1);

            this.$axios.post('/consumable/writeOff/page', { "limit": 10, "page": 1, cname: this.input, }
            ).then((r) => {
                console.log(r.data.data);
                this.tableData = r.data.data;
                this.total = r.data.count
            });
        },
        //转时间格式 
        msToDate(msec) {
            let res = this.date(msec)
            let datetime = new Date(res);
            let year = datetime.getFullYear();
            let month = datetime.getMonth();
            let date = datetime.getDate();
            let hour = datetime.getHours();
            let minute = datetime.getMinutes();
            let second = datetime.getSeconds();
            let result1 = year +
                '-' +
                ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                '-' +
                ((date + 1) < 10 ? '0' + date : date) +
                ' ' +
                ((hour + 1) < 10 ? '0' + hour : hour) +
                ':' +
                ((minute + 1) < 10 ? '0' + minute : minute) +
                ':' +
                ((second + 1) < 10 ? '0' + second : second);

            let result2 = year +
                '-' +
                ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                '-' +
                ((date + 1) < 10 ? '0' + date : date);
            let result = {
                cdepositTimeBegin: result1,
                cdepositTimEnd: result2
            };

            return result1;

        },
        change(e) {
            this.$forceUpdate()
        },
        date(date) {
            let result = new Date(date).getTime();
            return result;
        },
        //计数器
        handleChange(value) {
            console.log(value);
        },
        //展示查看易耗品的模态框
        async showDialog(id) {
            console.log(id);
            const { data: res } = await this.$axios.get('/consumable/warehousing/findById/' + id)
            this.showform = res.data
            this.dialogVisible = true
        },

        //展示修改易耗品的模态框
        async editDialog(id) {

            const { data: res } = await this.$axios.get('/consumable/warehousing/findById/'+id, )
            this.editform.cname = "" + res.data.cname;
            this.editform.cprice = "" + res.data.cprice;
            this.editform.cnum = "" + res.data.cnum;
            this.editform.cspecification = "" + res.data.cspecification;
            this.editform.storageSite = "" + res.data.storageSite;
            this.editform.creasonOffWrite = "" + res.data.creasonOffWrite;
            this.editform.id = "" + res.data.id;
            this.editform.cauditState = "" + res.data.cauditState;
            this.centerDialogVisible = true;
            console.log(res, '到期了');
        },
        //修改核销信息并提交
        editwarehousing() {
            this.$refs.editformRef.validate(async valid => {
                console.log(valid);
                //发起修改请求
                const data = await this.$axios.put(`/consumable/writeOff/update`, {
                    id: this.editform.id,
                    className: this.editform.className,
                    cname: this.editform.cname, cprice: this.editform.cprice, cnum: this.editform.cnum, cspecification: this.editform.cspecification,
                    storageSite: this.editform.storageSite, creasonOffWrite: this.editform.creasonOffWrite, cauditState: this.editform.cauditState,
                })
            })


            //关闭模态框
            this.dialogFormVisible = false
            //刷新数据表
            this.getdata()
            //提示修改成功
            this.$message.success('修改成功！')
            // this.handleCurrentChange()
        },
        //删除
        handleDelete(id) {
            console.log(id);
            this.$axios.delete(`/consumable/warehousing/delete/${id}`).then((res) => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.$message.success('删除成功！');
                    this.getdata();
                    // this.handleCurrentChange();
                } else { 删除失败 }
            })
        },

        exportExcel() {
            if (this.tableData.length < 1) {
                this.$message({
                    message: "请选择需要导出的内容",
                    type: "error",
                    center: true
                })
                return false
            }
            toExcel.getExcel("#tableData", "易耗品核销表数据")
        },
        getid() {
            this.id = this.addForm.id;
            console.log("这是", this.id);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    created() {
        this.getdata()
    },
    comments() {

    },
    computed: {
        tables() { //在你的数据表格中定义tabels
            const input = this.input
            if (input) {
                // console.log("input输入的搜索内容：" + this.input)
                return this.tableData.filter(data => {
                    console.log("object:" + Object.keys(data))
                    return Object.keys(data).some(key => {
                        return String(data[key]).toLowerCase().indexOf(input) > -1
                    })
                })
            }
            return this.tableData
        }
    }
};
</script>
    
<style>
* {
    margin: 0;
    padding: 0;
}

/* 新增挂失模态框 */
.ConsumvlesWriteoff {
    margin: 10px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 30px;
}

h2 {
    padding: 10px 0;
}

.from {
    padding: 10px 0;
}

.tu1 {
    width: 100px;
    height: 50px;
}

.shouSuo {
    width: 300px;
    height: 50px;
}

.tu2 {
    width: 50px;
    height: 50px;
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.table-center {
    text-align: center !important;
}

.row-bg {
    padding: 10px 0;
}

.el-icon-upload2 {
    height: 50px;
    width: 50px;
    font-size: 30px;
    cursor: pointer;
}

.el-icon-download {
    height: 50px;
    width: 50px;
    font-size: 30px;
    cursor: pointer;
}

.pag {
    float: right;
}

/* 查看详情模态框 */
.detailsLi {
    list-style-type: none;
}

.detailsLi li {
    margin: 10px;
}

.detailsLi li span {
    margin: 30px;
}

h2 {
    padding: 10px;
}

.table-center {
    text-align: center !important;
}
</style>